<template>
  <app-page>
    <img class="login-bg" src="@/static/images/loginBG.png" alt="">
    <view class="padding-content flex flex-wrap w-full items-between">
      <view class="w-full">
        <view class="page-title pt-196rpx flex flex-col flex-wrap justify-center items-center">
          <wd-img custom-class="title-img" :src="loginLogo"></wd-img>
          <text class="title-text h-56rpx lh-56rpx mb-116rpx mt-30rpx">欢迎登录鼎宏云屏</text>
        </view>
        <wd-form ref="loginForm" class="login-form" :model="loginMap">
          <wd-tabs v-model="loginMode" swipeable animated custom-class="left-tabs">
            <wd-tab title="验证码登录">
              <wd-cell-group :border="false">
                <view class="form-block m-32rpx shadow-block px-40rpx mb-136rpx">
                  <wd-input custom-class="login-input" v-model="loginMap.username" label="" label-width="100rpx"
                    prop="username" prefix-icon="none" inputmode="numeric" placeholder="请输入手机号" :required="false"
                    :maxlength="11" :rules="[{ required: true, message: '请输入手机号' }]">
                    <template #prefix>
                      <wd-img :src="phoneIcon" height="32rpx" width="32rpx"></wd-img>
                    </template>

                  </wd-input>
                  <wd-input no-border custom-class="login-input" v-model="loginMap.code" label="" label-width="100rpx"
                    prefix-icon="none" prop="code" inputmode="numeric" placeholder="请输入验证码" :required="false"
                    :maxlength="6" :rules="[{ required: true, message: '请输入验证码' }]">
                    <template #prefix>
                      <wd-img :src="codeIcon" height="32rpx" width="32rpx"></wd-img>
                    </template>
                    <template #suffix>
                      <wd-button type="text" size="small" :disabled="timeCount !== 60" block @click="handleSMS">{{
                        timeCount === 60 ? '获取验证码' : `${timeCount}秒后重试`
                        }}</wd-button>
                    </template>
                  </wd-input>
                </view>
              </wd-cell-group>
            </wd-tab>
            <wd-tab title="密码登录">
              <wd-cell-group :border="false">
                <view class="form-block m-32rpx shadow-block px-40rpx mb-136rpx">
                  <wd-input custom-class="login-input" v-model="loginMap.username" label="" label-width="100rpx"
                    prop="username" prefix-icon="none" inputmode="numeric" placeholder="请输入手机号" :required="false"
                    :maxlength="11" :rules="[{ required: true, message: '请输入手机号' }]">
                    <template #prefix>
                      <wd-img :src="nameIcon" height="32rpx" width="32rpx"></wd-img>
                    </template>
                  </wd-input>
                  <wd-input no-border custom-class="login-input" v-model="loginMap.password" label=""
                    label-width="100rpx" prefix-icon="none" prop="password" show-password placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码' }]">
                    <template #prefix>
                      <wd-img :src="pwdIcon" height="32rpx" width="32rpx"></wd-img>
                    </template>
                  </wd-input>
                  <wd-button custom-class="forget-btn" custom-style="color: var(--wot-color-text);" size="small" type="text" @click="toForget">忘记密码</wd-button>
                </view>
              </wd-cell-group>

            </wd-tab>
          </wd-tabs>
          <view class="footer px-64rpx">
            <wd-button custom-class="button gradient-btn" type="primary" size="large" block
              @click="loginMap.handleLogin">登录</wd-button>
            <ArgeeRow @change="setArgeeValue" />
          </view>
        </wd-form>
      </view>
      <FastLoginRow style="width: 100%;" />
    </view>
  </app-page>
</template>

<script lang="ts" setup>
import { throttle } from "lodash-es";
import { reactive, ref } from "vue";
import { sendCodeReq } from "@/api/login";
import ArgeeRow from './components/agreement.vue'
import FastLoginRow from './components/fastLogin.vue'
import loginLogo from "@/static/icon/login/loginLogo.png";
import phoneIcon from "@/static/icon/login/phone.png";
import codeIcon from "@/static/icon/login/code.png";
import nameIcon from "@/static/icon/login/user.png";
import pwdIcon from "@/static/icon/login/pwd.png";
import { useSystemStore } from "@/stores/system";
import ToastManager from "@/utils/toast";

const useStore = useSystemStore();
const loginForm = ref();
const argeeValue = ref(false);
const loginMode = ref<0 | 1>(0);
// 由于找不到 NodeJS 命名空间，使用 any 类型替代
const codeTimer = ref<any>();
const timeCount = ref(60);
const loginMap = reactive({
  username: "",
  password: "",
  code: "",
  async handleLogin() {
    loginForm.value.validate().then((result: any) => {
      if (result.valid) {
        const params: any = {
          username: loginMap.username,
          password: loginMap.password,
          code: loginMap.code
        };
        if (loginMode.value === 1) {
          delete params.password;
        } else {
          delete params.code;
        }
        useStore.login(params);
        // 登录逻辑
      }
    }).catch((error: any) => {
      console.log(error, "error");
    });
  }
});
const handleChangeMode = throttle(() => {
  loginMode.value = loginMode.value === 1 ? 0 : 1;
}, 1000);
const handleSMS = throttle(() => {
  console.log("handleSMS");
  if (loginMap.username) {
    sendCodeReq({ phone: loginMap.username }).then(() => {
      codeTimer.value = setInterval(() => {
        timeCount.value -= 1;
        if (timeCount.value === 0) {
          clearInterval(codeTimer.value);
          timeCount.value = 60;
        }
      }, 1000);
    });
  } else {
    ToastManager.toast({ title: "请输入手机号", icon: "none" });
  }
  // 获取验证码逻辑
}, 1000);
function setArgeeValue(value: boolean) {
  argeeValue.value = value;
}
function toForget() {
  uni.navigateTo({
    url: "/pages/login/forget"
  });
}
</script>

<style lang="scss" scoped>
.title-img {
  width: 272rpx;
  height: 80rpx;
  margin-top: 116rpx;
}

.title-text {
  font-size: 40rpx;
  font-weight: 800;
  color: var(--color-heavy);
}

.login-form {
  border-radius: 16rpx;
  // background: #f0f0f0;
  // box-shadow: -8px 8px 16px #e9e9e9,
  //   8px -8px 16px #f7f7f7;
  // padding: 32rpx;
  // height: 100%;

  .wd-cell-group,
  .wd-cell-group__body {
    background: transparent !important;
  }
    .wd-tabs__nav-item {
      height: 46rpx;
    }
  .wd-tabs__line {

  }
}

.login-mode {
  color: var(--wot-color-theme);
  padding: 32rpx 0;
}

.padding-content {
  z-index: 9;
  position: inherit;
  padding: 0;
  align-content: space-between;
  min-height: 100vh;
  box-sizing: border-box;
}
.form-block {
  border-radius: 12rpx;
  background: var(--color-white);
  position: relative;
  .forget-btn {
    position: absolute;
    right: 0;
    bottom: -54rpx;
  }
}
.login-input {
  height: 160rpx;
  border-top: 1px solid var(--color-border);
  --at-apply: flex items-center;
  .wd-input__value {
    align-content: center;
    height: 100%;
  }
}
</style>